<template>
  <div class="render">
    <!-- input -->
    <div class="renderInput" v-if="type === 'String'">
      <div class="text" :title="$srv.getI18nByPath('system.compoKey.' + name)">
        {{ $srv.getI18nByPath('system.compoKey.' + name) }}:
      </div>
      <Input
        :value="render"
        :disabled="isDisabled"
        :placeholder="$srv.getI18nByPath('system.compoKeyPlaceholder.' + name)"
        @on-blur="saveDetailToConfig"
      />
    </div>
    <!-- inputNumber -->
    <div class="renderInput" v-else-if="type === 'Number'">
      <div class="text" :title="$srv.getI18nByPath('system.compoKey.' + name)">
        {{ $srv.getI18nByPath('system.compoKey.' + name) }}:
      </div>
      <!-- <Input
        :value="render"
        type="number"
        :disabled="isDisabled"
        :placeholder="$srv.getI18nByPath('system.compoKeyPlaceholder.' + name)"
        @on-blur="saveDetailToConfig"
      /> -->
      <InputNumber
        :value="render"
        :disabled="isDisabled"
        @on-change="saveDetailToConfig"
      />
    </div>
    <!-- switch -->
    <div class="renderSwitch" v-else-if="type === 'Bool'">
      <div class="text" :title="$srv.getI18nByPath('system.compoKey.' + name)">
        {{ $srv.getI18nByPath('system.compoKey.' + name) }}:
      </div>
      <iSwitch
        :value="render"
        :disabled="isDisabled"
        @on-change="saveDetailToConfig"
      />
    </div>
    <!-- object -->
    <div class="renderObject" v-else-if="type === 'Object'">
      <div class="text" :title="$srv.getI18nByPath('system.compoKey.' + name)">
        {{ $srv.getI18nByPath('system.compoKey.' + name) }}:
      </div>
      <Input
        v-for="(value, key) in render"
        :key="key"
        :value="value"
        :placeholder="$srv.getI18nByPath('system.compoKeyPlaceholder.' + key)"
        @on-blur="saveDetailToConfig($event, key)"
      />
    </div>
  </div>
</template>

<script lang="ts">
import { Tsrv, T_srv, vue, ifs, I_command } from './config';

@T_srv.comp({})
export default class DetailRender extends vue {
  @T_srv.prop() private name: string;

  @T_srv.prop() private value: any;

  @T_srv.prop() private render: boolean;

  @T_srv.prop() private isDisabled: boolean;
  // @T_srv.prop({
  //   required: false,
  //   // type: boolean,
  //   default: false
  // })
  // isDisabled: boolean;

  /* 父组件compBoxInfo */
  @T_srv.prop({
    required: false,
    type: Object,
    default: null
  })
  compBoxInfo: ifs.I_compBoxInfo;

  /* 组件名 */
  private G_compName: string = 'DetailRender';

  /* 组件箱信息对象 */
  private GT_compBoxInfo: ifs.I_compBoxInfo;

  /* 组件箱对象 */
  private GT_compBox: ifs.I_compBox;

  /* 组件箱识别ID */
  private G_compID: string;

  private GT_command: I_command = null;

  get type() {
    return this.checkValueType(this.value);
  }

  created() {
    // 如果父组件没有传参，那就产生一个
    this.GT_compBoxInfo = Tsrv.getCompInfo(this.compBoxInfo);
    this.G_compID = this.GT_compBoxInfo.compID;
    this.GT_compBox = this.GT_compBoxInfo.TcompBox;
    this.GT_command = this.GT_compBox.getCompMergeName(
      this.G_compID,
      'oSetupPanelCMD'
    );
  }

  mounted() {
    this.$emit('compBoxInfo', this.GT_compBoxInfo);
    this.GT_compBox.addCompMergeName(this.G_compID, this.G_compName, this);
  }

  destroyed() {
    /* 注册组件销毁 */
    this.GT_compBox.removeCompMergeName(this.G_compID, this.G_compName);

    /* 如果父组件传入的compBoxInfo则删除本文件产生的引用,反之是本组件产生的ID统一删除 */
    if (Tsrv.utils.isEmpty(this.compBoxInfo)) {
      this.GT_compBox.removeCompsWithCompID(this.G_compID);
    } else {
      this.GT_compBox.removeCompsMergeName(this.G_compID, [
        `'${this.G_compName}'`
      ]);
    }
    /* 如果是动态组件可能会关闭全局compBox */
    // this.GT_compBox = null
  }

  private checkValueType(obj: any) {
    let res = null;
    if (Tsrv.utils.isString(obj)) {
      res = 'String';
    } else if (Tsrv.utils.isNumber(obj)) {
      res = 'Number';
    } else if (Tsrv.utils.isBoolean(obj)) {
      res = 'Bool';
    } else if (Tsrv.utils.isPlainObject(obj)) {
      res = 'Object';
    }
    return res;
  }

  private saveDetailToConfig(val: any, params: any = null) {
    let res = val;
    if (this.type === 'String') {
      res = val.target.value;
    } else if (this.type === 'Number') {
      res = Tsrv.utils.toInteger(val);
    } else if (this.type === 'Object') {
      res = Tsrv.utils.clone(this.render, true);
      res[params] = val.target.value;
    }
    this.$emit('change', res);
    this.$emit('saveDetailToConfig');
  }
}
</script>

<style scoped lang="scss">
.render {
  float: left;
  height: 32px;
  .renderInput {
    width: 100%;
    display: flex;
    .text {
      font-size: 12px;
      float: left;
      display: block;
      height: 32px;
      line-height: 32px;
      width: 75px;
      padding-right: 10px;
      text-overflow: ellipsis;
      overflow: hidden;
      height: 22px;
      white-space: nowrap;
      text-align: center;
    }
    .ivu-input-wrapper {
      width: 246px;
    }
  }
  .renderObject {
    display: flex;
    line-height: 32px;
    .text {
      font-size: 12px;
      float: left;
      display: block;
      height: 32px;
      line-height: 32px;
      width: 75px;
      padding-right: 10px;
      margin-right: -5px;
      text-overflow: ellipsis;
      overflow: hidden;
      height: 22px;
      white-space: nowrap;
      text-align: center;
      flex-shrink: 0;
    }
    .ivu-input-wrapper {
      margin: 0 5px;
    }
  }
  .renderSwitch {
    padding: 5px 0;
    width: 160px;
    .text {
      font-size: 12px;
      float: left;
      display: block;
      line-height: 22px;
      width: 75px;
      padding-right: 10px;
      text-align: center;
      text-overflow: ellipsis;
      overflow: hidden;
      height: 22px;
      white-space: nowrap;
    }
  }
}
</style>
